<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>流浪地球</title>
</head>
<style>
  html,
  body {
    margin: 0px;
  }

  img {
    display: none;
  }
</style>

<body>
  <img src="http://img2.imgtn.bdimg.com/it/u=2175024591,3163870713&fm=26&gp=0.jpg" id="AirImg01" />
  <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1435658244,1359113079&fm=26&gp=0.jpg"
    id="AirImg02" />
  <img src="http://img4.imgtn.bdimg.com/it/u=3951938443,3972900211&fm=26&gp=0.jpg" id="weiqi">
  <canvas id="canvas"></canvas>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
  window.onload = function () {
    var canvas = document.getElementById('canvas');
    var oCG = canvas.getContext('2d');
    var AirImg01 = document.getElementById('AirImg01');
    var AirImg02 = document.getElementById('AirImg02');
    var weiqiImg = document.getElementById('weiqi');
    //全局对象飞船4
    var airImgs = [];
    // airImgs.push(AirImg01);
    airImgs.push(AirImg02);
    // airImgs.push(weiqiImg);
    var air = new Air(50, 0, 50, 50, airImgs);

    //尾气集合
    var weiqiList = [];
    //画布自适应全屏
    resizeCanvas();
    run();
    touchChangan();
    
    //全局管道对象上管道
    var guanDaoWidth = 50;
    var shangGuanDaoHeight = Math.random() * (canvas.height/2);
    var shangGuanDao = new GuanDao(canvas.width-guanDaoWidth, 0, guanDaoWidth, shangGuanDaoHeight);
    //全局管道对象下管道
    var xiaGuanDaoHeight = canvas.height - shangGuanDaoHeight - 150;
    var xiaGuanDao = new GuanDao(canvas.width-guanDaoWidth,canvas.height - xiaGuanDaoHeight, 
    guanDaoWidth, xiaGuanDaoHeight);

    function run() {
      var count = 0;
      var mainInterval = setInterval(() => {
        //清空画布
        resizeCanvas();
        //画飞船
        air.showImg();
        air.y += 2;
        if (air.y + air.height > canvas.height) {
          air.y = 0;
        }
        //画尾气
        if (count++ % 10 == 0) {
          weiqiList.push(new Weiqi(air.x - 10, air.y + 10, 10, 10, weiqiImg))
        }
        weiqiList = weiqiList.filter(item => {
          item.x--;
          if (item.x > 0) {
            oCG.drawImage(item.img, item.x, item.y, item.width, item.height)
            return item;
          }
        })
        drawGuanDao();

      }, 1000 / 30);
    }
        

    function Air(x, y, width, height, img) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
      this.img = img;

      this.showImg = function () {
        var firestImg = img.shift();
        oCG.drawImage(firestImg, this.x, this.y, this.width, this.height);
        img.push(firestImg);
      }
    }

    function Weiqi(x, y, width, height, img) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
      this.img = img;
    }

    function GuanDao(x, y, width, height, img) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
      this.img = img;
    }

    function drawGuanDao() {
      if(shangGuanDao.x < 0-shangGuanDao.width){
        shangGuanDao.x = canvas.width;
        shangGuanDao.height = Math.random() * (canvas.height/2);
        xiaGuanDao.height = canvas.height - shangGuanDao.height - 150;
        xiaGuanDao.y = canvas.height - xiaGuanDao.height;
        xiaGuanDao.x = shangGuanDao.x;
      }
      let suDu = 2;
      //画上管道
      shangGuanDao.x-= suDu;
      oCG.beginPath();
      oCG.fillStyle = "#ccc";
      oCG.rect(shangGuanDao.x, shangGuanDao.y, shangGuanDao.width, shangGuanDao.height);
      oCG.fill();
      //画下管道
      xiaGuanDao.x-= suDu;
      oCG.beginPath();
      oCG.fillStyle = "#ccc";
      oCG.rect(xiaGuanDao.x, xiaGuanDao.y, xiaGuanDao.width, xiaGuanDao.height);
      oCG.fill();
    }

    function touchChangan() {
      $("#canvas").on({
        touchmove: function (e) {
          e.preventDefault();
          air.y -= 2;
        },
      });
    }

    function reSize() {
      $(window).resize(resizeCanvas);
      resizeCanvas();
    }

    function resizeCanvas() {
      $(canvas).attr("width", $(window).get(0).innerWidth);
      $(canvas).attr("height", $(window).get(0).innerHeight);
    };
    reSize();

    function log(msg) {
      console.log(msg);
    }
  }
</script>

</html>